<template>
  <div class="app-container pt0">
    <div class="form_css">
      <div class="f_title">证件申请</div>
      <div class="f_form">
        <el-form ref="form" :model="form" :rules="rules" label-width="160px">
          <div class="m-title">选择志愿者团队</div>
          <div class="form_left">
            <el-form-item label="志愿者团队名称：" prop="deptId">
              <treeselect
                v-model="form.deptId"
                :options="deptOptions"
                :show-count="true"
                placeholder="请选择志愿者团队名称"
                :flat="true"
                :normalizer="myNormalizer"
                class="no_tree"
              />
            </el-form-item>
          </div>
          <div class="m-title">个人信息：</div>
          <div class="form_left">
            <el-form-item label="姓名：" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="性别：" prop="sex">
              <el-select
                v-model="form.sex"
                placeholder="请选择性别"
                class="w100"
              >
                <el-option
                  v-for="item in dict.type.sys_user_sex"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
             <el-form-item label="国籍：" prop="country" class="coun_form">
              <el-select
                v-model="form.country"
                placeholder="请选择国籍"
                class="w100"
                filterable
                clearable
              >
                <el-option
                  v-for="item in dict.type.sys_user_country"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <span class="con_tip">说明：支持搜索</span>
            </el-form-item>
            <el-form-item label="证件类型：" prop="cardType">
              <el-select
                v-model="form.cardType"
                placeholder="请选择证件类型"
                class="w100"
                filterable
                clearable
              >
                <el-option
                  v-for="item in dict.type.sys_card_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号：" prop="cardNum">
              <el-input v-model="form.cardNum" placeholder="请输入证件号" />
            </el-form-item>
            <el-form-item label="户籍地址：" prop="address">
              <el-input
                v-model="form.address"
                placeholder="请输入户籍地址"
                style="width: calc(100% - 30px); margin-right: 6px"
              />
              <el-tooltip
                content="户籍地址与身份证地址填写一致"
                placement="top"
              >
                <span> <i class="el-icon-question"></i> </span>
              </el-tooltip>
            </el-form-item>
            <el-form-item label="单位：" prop="company">
              <el-input v-model="form.company" placeholder="请输入单位" />
            </el-form-item>
            <el-form-item label="职务：" prop="post">
              <el-input v-model="form.post" placeholder="请输入职务" />
            </el-form-item>
            <el-form-item label="电话：" prop="mobile">
              <el-input v-model="form.mobile" placeholder="请输入电话" />
            </el-form-item>
            <el-form-item label="申请证件类型：" prop="applyType">
              <el-select
                v-model="form.applyType"
                placeholder="请选择申请证件类型"
                class="w100"
                filterable
                clearable
              >
                <el-option
                  v-for="item in dict.type.sys_volunteer_type"
                  :key="item.raw.dictCode"
                  :label="item.label"
                  :value="item.raw.dictCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="人员照片：" prop="picUrl" ref="imgViod">
              <div>
                <div
                  v-if="form.picUrl"
                  style="width: 100px; height: 100px; position: relative"
                >
                  <div v-if="form.picUrl" class="demo-image__preview w100-img">
                    <el-image
                      :src="form.picUrl"
                      :preview-src-list="[form.picUrl]"
                      class="avatar"
                    >
                    </el-image>
                  </div>
                  <i
                    v-if="form.picUrl"
                    class="el-icon-delete remove-img"
                    @click="handleRemove"
                  />
                </div>
                <uploadBig
                  v-else
                  :showBtn="true"
                  btnText="上传图片"
                  upWidth="50px"
                  upHeight="30px"
                  upLineHeight="30px"
                  :accept="uploadAccept"
                  :showFileList="false"
                  :fileSize="5"
                  @getUpload="uploadpicUrl"
                />
              </div>
              <div class="w100 small-text">
                提示：建议上传白底一寸免冠照，照片尺寸为
                <span class="red">295*413</span> ， ，图片大小不超过5M，格式为
                <span class="red">{{ uploadAccept }}</span>
                的文件
              </div>
            </el-form-item>
            <el-form-item label="">
              <el-button
                class="sub_btn"
                type="primary"
                @click="submitForm"
                :loading="btnLoading"
              >
                提 交
              </el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { addCert } from "@/api/project/report";

import { deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "User",
  dicts: [
    "sys_user_sex",
    "sys_volunteer_type",
    "sys_card_type",
    "sys_user_country",
  ],
  components: { Treeselect },
  data() {
    const checkNum = (rule, value, callback) => {
      if (value === undefined || value === "") {
        callback(new Error("请输入证件号"));
      } else {
        if (this.form.cardType === "居民身份证") {
          if (value.toString().length != 18) {
            callback(new Error("限制可输入18位，请重新输入"));
          } else {
            callback();
          }
        } else {
          callback();
        }
      }
    };
    return {
      // 遮罩层
      loading: false,
      btnLoading: false,

      form: {},
      // 表单校验
      rules: {
        deptId: [
          { required: true, message: "请选择高校名称", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        cardType: [
          { required: true, message: "请选择证件类型", trigger: "change" },
        ],
        cardNum: [{ required: true, validator: checkNum, trigger: "blur" }],
        country: [{ required: true, message: "请选择国籍", trigger: "change" }],
        address: [
          { required: true, message: "请输入户籍地址", trigger: "blur" },
        ],
        company: [
          { required: true, message: "请输入单位名称", trigger: "blur" },
        ],
        post: [{ required: true, message: "请输入职务", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入电话", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        picUrl: [
          { required: true, message: "请上传人员照片", trigger: "blur" },
        ],
        applyType: [
          { required: true, message: "请选择申请证件类型", trigger: "change" },
        ],
      },
      uploadAccept: ".png, .jpg, .jpeg",

      deptOptions: [],
      sig: 3,
    };
  },

  created() {
    this.reset();
    this.getDeptTree();
  },
  methods: {
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect({ flag: this.sig }).then((response) => {
        this.deptOptions = response.data;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        deptId: undefined,
        certId: undefined,
        name: undefined,
        sex: undefined,
        country: undefined,
        address: undefined,
        cardType: undefined,
        cardNum: undefined,
        company: undefined,
        post: undefined,
        mobile: undefined,
        picUrl: undefined,
        applyType: undefined,
        deptId: undefined,
        joinYear: "2025",
        flag: 2,
      };
      this.resetForm("form");
    },

    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          addCert(this.form)
            .then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.reset();
            })
            .finally(() => {
              this.btnLoading = false;
            });
        }
      });
    },

    // 图片上传
    uploadpicUrl(data) {
      this.form.picUrl = data;
      this.$refs.imgViod.clearValidate();
    },

    // 移除封面图
    handleRemove() {
      this.form.picUrl = undefined;
    },

    myNormalizer(node) {
      return {
        id: node.id,
        label: node.label,
        parentId: node.parentId,
        isDisabled: Number(node.parentId) < 100,
        children: node.children,
      };
    },
  },
};
</script>

<style scoped>
.form_css {
  width: 700px;
  margin: auto;
}

.f_title {
  width: 100%;
  text-align: left;
  overflow: hidden;
  font-size: 22px;
  font-weight: bold;
  padding-bottom: 15px;
  margin-bottom: 30px;
  border-bottom: 1px solid #ddd;
}
.f_form {
  width: 600px;
  height: auto;
}

.m-title {
  width: 100%;
  padding-left: 30px;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.form_left {
  width: 100%;
  padding-left: 80px;
}
.sub_btn {
  width: 200px;

  margin-left: 50px;
  margin-top: 30px;
}

.care_css {
  width: 100%;
  height: auto;
  padding-left: 80px;
  font-size: 14px;
  margin-bottom: 20px;
}

.care_css ul li:first-child {
  padding-left: 0;
}
.care_css ul li {
  margin-bottom: 6px;
  padding-left: 20px;
}

.coun_form {
  margin-bottom: 10px;
}

.con_tip {
  font-size: 14px;
  color: #504f4f;
  display: block;
  margin-top: -4px;
}
</style>

<style>
.f_form .el-form-item__label,
.f_form .el-form-item__content,
.f_form .el-input--medium {
  font-size: 16px;
}

.coun_form .el-form-item__error {
  top: 56px !important;
}
</style>
